<template>
  <div class="login-box">
    <div class="login-body">
      <div class="login-left">
        <div class="login-left-top">
          <div class="login-logo"></div>
        </div>
        <div class="login-left-bottom" >
<!--          飘带轻舞，心随风扬-->
        </div>
      </div>

      <div class="login-right" style="position: absolute; width: 20%; margin-left: 760px;
            margin-top: 150px;
">

        <h4 class="login-title" style="margin-bottom: 20px;">
          注册
        </h4>

        <el-form
            ref="loginForm"
            autocomplete="on"
            :model="loginForm"
            :rules="loginRules"
            label-position="left">


          <el-form-item prop="username" style="margin-bottom:40px;">
            <el-input
                style="line-height: 50px"
                type="text"
                tabindex="1"
                ref="username"
                name="username"
                autocomplete="on"
                prefix-icon="el-icon-user"
                placeholder="请输入账户名称"
                v-model="loginForm.username"
            />
          </el-form-item>

          <el-form-item prop="password" style="margin-bottom:50px;">
            <el-tooltip
                manual
                placement="right"
                v-model="capsTooltip"
                content="已开启大写锁定">
              <el-input
                  tabindex="2"
                  show-password
                  ref="password"
                  name="password"
                  autocomplete="on"

                  :key="passwordType"
                  :type="passwordType"

                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"

                  @blur="capsTooltip = false"
                  v-model="loginForm.password"/>
<!--                  @keyup.native="checkCapslock"-->
<!--                  @keyup.enter.native="handleLogin"-->
              />

            </el-tooltip>
          </el-form-item>

          <el-form-item prop="confirmPassword" style="margin-bottom:20px;">
            <el-tooltip
                manual
                placement="right"
                v-model="capsTooltip"
                content="已开启大写锁定">
              <el-input
                  tabindex="2"
                  show-Password
                  ref="confirmPassword"
                  name="confirmPassword"
                  autocomplete="on"

                  :key="passwordType"
                  :type="passwordType"

                  placeholder="请输入确认密码"
                  prefix-icon="el-icon-lock"

                  @blur="capsTooltip = false"
                  v-model="loginForm.confirmPassword"/>
              <!--                  @keyup.native="checkCapslock"-->
              <!--                  @keyup.enter.native="handleLogin"-->
              />

            </el-tooltip>
          </el-form-item>


          <div style="margin-top: 60px">
          <el-button
              type="primary"
              :loading="loading"
              @click="register"
              style="font-family: 楷体;font-size: 17px"
          >
<!--              @click.native.prevent="handleLogin">-->
            <i class="el-icon-s-promotion"/> 注 册
          </el-button>

          <span>
            <img id="3" src="../assets/3.jpg" height="30px" v-show="isShow3"
                 style="margin-left: 10px;
                    position: absolute;
                    margin-left: 2px;
">
          </span>
          <span>
            <img id="4" src="../assets/4.jpg" height="30px" v-show="isShow4"
                 style="margin-left: 10px;
                    position: absolute;
                    margin-left: 2px;
">
          </span>

          <el-button
              type="warning"
              :loading="loading"
              style="margin-left: 60px;font-family: 楷体;font-size: 17px"
              @click="toLogin"
          >

            <i class="el-icon-s-check"/> 返回登录
          </el-button>
          </div>



        </el-form>
      </div>

    </div>


  </div>
</template>

<script>
// npm install js-cookie --save
//import Cookies from 'js-cookie'
export default {
  name: "Login",
  mounted() {
    document.getElementById('3').addEventListener('click', () => {
      this.isShow3 = false
      this.isShow4 = true
    });
    document.getElementById('4').addEventListener('click', () => {
      this.isShow3 = true
      this.isShow4 = false
    });
  },
  data() {
    return {
      //显示图片
      isShow3: false,
      isShow4: true,

      // 登录重定向
      redirect:"",
      // 重定向参数
      otherQuery: {},

      // 是否正在登录
      loading: false,
      // 开启大写提示
      capsTooltip: false,
      // 密码控件类型
      passwordType: "password",

      // 注册表单控件
      loginForm:{
        username: "",
        password: "",
        confirmPassword: ""
      },


      // 控件校验规则
      loginRules: {
        username: [
            {required: true, trigger: "blur", message: '用户名不能为空' },
            {min: 3, max: 10,message: '长度在3到10个字符',trigger: "blur"}
        ],
        password: [
            {required: true, trigger: "blur", message: '密码不能为空'},
            {min: 6, max: 20,message: '长度在6到20个字符',trigger: "blur"}
        ],
        confirmPassword: [
          {required: true, trigger: "blur", message: '确认密码不能为空'},
          {min: 6, max: 20,message: '长度在6到20个字符',trigger: "blur"}
        ]
      },

    };
  },
  watch: {

    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          // 包含第一个参数的重定向
          this.redirect = query.redirect;
          // 重定向其它的查询参数
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      // 立即执行
      immediate: true,
    },
  },


  // 页面挂载时
  // mounted() {
  //
  //   // 输入自动聚焦
  //   if (this.loginForm.username === "") {
  //     this.$refs.username.focus();
  //   } else if (this.loginForm.password === "") {
  //     this.$refs.password.focus();
  //   };
  //   let remember = new Boolean(Cookies.get("remember"));
  //
  //   if(remember){
  //     this.$nextTick(()=>{
  //       this.loginForm.username = window.decodeURIComponent(window.atob(Cookies.get("username")));
  //       this.loginForm.password = window.decodeURIComponent(window.atob(Cookies.get("password")));
  //       this.loginForm.remember = remember;
  //     });
  //   }
  //
  // },


  methods: {
    //路由跳转
    toLogin(){
      this.$router.push("/login")
      setTimeout(() => {
        this.$router.go(0)
      },300)

    },

    // 检测大小写
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    register(){
      this.$refs['loginForm'].validate((valid) => {
        if(valid) {
          if(this.loginForm.password !== this.loginForm.confirmPassword){
            this.$message.error("两次输入的密码不一致")
            return false
          }
          this.request.post("user/register",this.loginForm).then(res => {
            if(res.code === '200'){//表单校验合法
              this.$message.success("注册成功")
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      });

    },

    // 点击按钮登录
    // handleLogin() {
    //
    //   this.$refs.loginForm.validate((valid) => {
    //     if (valid) {
    //       this.loading = true;
    //
    //       let params = JSON.parse(JSON.stringify(this.loginForm));
    //
    //       this.$store.dispatch("user/login", params).then(() => {
    //
    //         // 自动登录
    //         if(params.remember){
    //           Cookies.set('username', window.btoa(window.encodeURIComponent(params.username)));
    //           Cookies.set('password', window.btoa(window.encodeURIComponent(params.password)));
    //           Cookies.set('remember', true);
    //         }else{
    //           Cookies.remove('username');
    //           Cookies.remove('password');
    //           Cookies.remove('remember');
    //         };
    //
    //         this.$router.push({
    //           path: this.redirect || "/",
    //           query: this.otherQuery,
    //         });
    //         this.loading = false;
    //       }).catch(() => {
    //         this.loading = false;
    //       });
    //     } else {
    //       return false;
    //     }
    //   });
    //
    // },

    // 获取查询参数
    getOtherQuery(query) {
      return Object.keys(query).reduce((obj, value) => {
        // 排除重定向和第一个查询能数
        if (value !== "redirect") {
          obj[value] = query[value];
        };
        return obj;
      },{});
    }



  },

};
</script>

<style>


.login-box{
  position: absolute;
  background-image: url(../assets/game10.jpg);
  background-size: 1700px;
  //background-size: 2050px;
  //background-position-x: -190px;
  width: 100%;
  height: 100%;
  display: flex;
  // 系统的背景




  .el-input__inner{
    height: 40px;
    font-size: 16px;
    padding-left: 35px;
  }
}
.login-title{
  /* 定义动画名称和持续时间 */
  animation: colorChange 3s infinite;

  font-family: 楷体;

  text-align: center;
  color: #2568ff;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 5px;
}
.login-left-bottom{
  color: indigo;
  font-size: x-large;
  font-style: initial;
  //background-color: rgba(0,0,0,.6);
  position: absolute;
  width: 45%;
  height: 63%;
  margin-left: 450px;
  margin-top: 130px;
  //background-image: url(../assets/game7.jpg);
  background-position: left;
  //box-shadow: 0 0 95px 5px cadetblue inset; /* 【主要代码】 */
  background-size: 800px;

}

.login-body{
  width: 100%;
  display: flex;
  height: 100%;
}
.login-right{
  position: relative;
  left: -180px;
  top: -16px;
  border-radius: 10px 10px 10px 10px;
  height: 62vh;
  background-color: rgba(0,0,0,.5);
  padding: 10px 35px;
}

/* 使用@keyframes定义动画 */
@keyframes colorChange {
  0% {
    color: darkseagreen; /* 动画开始时的颜色 */
  }
  50% {
    color: orange; /* 动画中间时的颜色 */
  }
  100% {
    color: gray; /* 动画结束时的颜色 */
  }
}

@media screen and (max-device-width: 600px) {
  .login-left{
    display: none !important;
  }
  .login-right{
    border-radius:10px !important;
  }

}

</style>
